<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/jquery-easyui-1.8.8/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/jquery-easyui-1.8.8/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/jquery-easyui-1.8.8/themes/color.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/jquery-easyui-1.8.8/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/jquery-easyui-1.8.8/jquery.easyui.min.js"></script>
</head>
<body>
	<table id="type_dg" title="汽车类型列表" class="easyui-datagrid"
		style="width: 100%; height: 480px"
		url="${param.request.contextPath}/typr/list" toolbar="#type_toolbar"
		pagination="true" rownumbers="true" fitColumns="true"
		singleSelect="true">
		<thead>
			<tr>
				<th field="cb" checkbox="true" align="center"></th>
				<!--  field字段需要与返回数据的属性名一致 -->
				<th field="typeId" align="center">类型编号</th>
				<th field="typeName" width="50">类型名称</th>
				<th field="modelLevel" width="50">车型级别</th>
				<th field="carBody" width="50">车身型式</th>
				<th field="carSize" width="50">车身尺寸</th>
				<th field="carCombined" width="50">综合油耗</th>
				<th field="umweltsatz" width="50">环保标准</th>
				<th field="engine" width="50">发动机</th>
				<th field="drive" width="50">驱动</th>
				<th field="gearbox" width="50">变速箱</th>
			</tr>
		</thead>
	</table>

	<div id="type_toolbar">
		<a href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-add" plain="true" onclick="newType()">新增</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" onclick="editType()">修改</a> <a
			href="javascript:void(0)" class="easyui-linkbutton"
			iconCls="icon-remove" plain="true" onclick="destroyType()">删除</a>
	</div>

	<div id="type_dlg" class="easyui-dialog"
		style="width: 700px; height: 480px; padding: 10px 20px" closed="true"
		buttons="#type_dlg-buttons">
		<div class="ftitle">信息管理</div>
		<form id="type_fm" enctype="multipart/form-data" method="post">
			<div class="fitem">
				<label>类型名称:</label> <input name="typeName"
					class="easyui-validatebox" required="true">
			</div>
			
			<div class="fitem">
				<label>车辆级别:</label> <select class="easyui-combobox"
					name="modelLevel" style="width: 150px" required="true">
					<option value="小型车">小型车</option>
					<option value="紧凑车型">紧凑车型</option>
					<option value="中等车型">中等车型</option>
					<option value="高级车型">高级车型</option>
					<option value="SUV车型">SUV车型</option>
				</select>
			</div>
			<div class="fitem">
				<label>车身型式:</label> <select class="easyui-combobox" name="carBody"
					style="width: 150px" required="true">
					<option value="4门5座三厢车">4门5座三厢车</option>
					<option value="4门7座三厢车">4门7座三厢车</option>
					<option value="2门2座三厢车">2门2座三厢车</option>
				</select>
			</div>
			
			<div class="fitem">
				<label>车身尺寸:</label> <select class="easyui-combobox" name="carSize"
					style="width: 150px" required="true">
					<option value="4641*1815*1450">4641*1815*1450</option>
					<option value="4741*1814*1440">4741*1814*1440</option>
					<option value="4841*1813*1430">4841*1813*1430</option>
				</select>
			</div>
			
			<div class="fitem">
				<label>综合油耗:</label> <select class="easyui-combobox"
					name="carCombined" style="width: 150px" required="true">
					<option value="4.9L/100km(工信部)">4.9L/100km(工信部)</option>
					<option value="4.8L/100km(工信部)">4.8L/100km(工信部)</option>
					<option value="4.7L/100km(工信部)">4.7L/100km(工信部)</option>
				</select>
			</div>

			<div class="fitem">
				<label>环保标准:</label> <select class="easyui-combobox"
					name="umweltsatz" style="width: 150px" required="true">
					<option value="国VI">国VI</option>
					<option value="国V">国V</option>
					<option value="国IV">国IV</option>
				</select>
			</div>

			<div class="fitem">
				<label>发动机:</label> <select class="easyui-combobox" name="engine"
					style="width: 150px" required="true">
					<option value="1.6L 139马力 L4">1.6L 139马力 L4</option>
					<option value="1.7L 140马力 L5">1.7L 140马力 L5</option>
					<option value="1.8L 141马力 L6">1.8L 141马力 L6</option>
				</select>
			</div>

			<div class="fitem">
				<label>车辆驱动:</label> <select class="easyui-combobox" name="drive"
					style="width: 150px" required="true">
					<option value="前驱">前驱</option>
					<option value="后驱">后驱</option>
					<option value="四驱">四驱</option>
				</select>
			</div>

			<div class="fitem">
				<label>变速箱:</label> <select class="easyui-combobox" name="gearbox"
					style="width: 150px" required="true">
					<option value="CVT无级变速">CVT无级变速</option>
					<option value="DVT无级变速">DVT无级变速</option>
					<option value="EVT无级变速">EVT无级变速</option>
				</select>
			</div>
		</form>
	</div>

	<div id="type_dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
			onclick="save()">保存</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-cancel"
			onclick="javascript:$('#type_dlg').dialog('close')">取消</a>
	</div>


	<script type="text/javascript">
		function newType() {
			$('#type_dlg').dialog('open').dialog('setTitle', '新增管理');
			$('#type_fm').form('clear');
			url = '${pageContext.request.contextPath}/typr/add';
		}

		function editType() {
			$('#type_fm').form('clear');
			var row = $('#type_dg').datagrid('getSelected');
			if (row) {
				$('#type_dlg').dialog('open').dialog('setTitle', '修改管理');
				$('#type_fm').form('load', row);
				url = '${pageContext.request.contextPath}/typr/edit?typeId='
						+ row.typeId;
			}
		}

		function save() {
			$('#type_fm').form('submit', {
				url : url,
				onSubmit : function() {
					return $(this).form('validate');
				},
				success : function(result) {
					var result = eval('(' + result + ')');
					if (!result.success) {
						$.messager.show({
							title : 'Error',
							msg : result.errorMsg
						});
					} else {
						$.messager.show({
							title : 'Info',
							msg : result.errorMsg
						});
					}

					$('#type_dlg').dialog('close'); // close the dialog
					$('#type_dg').datagrid('reload'); // reload the user data
				}
			});
		}

		function destroyType() {
			var row = $('#type_dg').datagrid('getSelected');
			if (row) {
				$.messager
						.confirm(
								'Confirm',
								'确认删除?',
								function(r) {
									if (r) {
										$
												.post(
														'${pageContext.request.contextPath}/typr/delete',
														{
															typeId : row.typeId
														},
														function(result) {
															if (result.success) {
																$('#type_dg')
																		.datagrid(
																				'reload'); // reload the user data
															} else {
																$.messager
																		.show({ // show error message
																			title : 'Error',
																			msg : result.errorMsg
																		});
															}
														}, 'json');
									}
								});
			}
		}

		function imageFormatter(value, row, index) {
			return "<img  width='45' height='45' src='${pageContext.request.contextPath}/"+value+"'>";
		}
	</script>
</body>
</html>